<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由规则中传递参数</title>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../lib/vue-router-3.0.1.js"></script>

</head>
<body>


<div id="app">

    <!-- 方式一： 如果在路由中，使用 query查询字符串[ /path?id=xx&name=xx ]，给路由传递参数，则不需要修改路由规则的 path 属性  -->
    <router-link to="/login?id=10&name=zsp">登录</router-link>

    <!-- 方式二： 如果在路由中，使用 params 【 /path/id/name 】给路由传递参数，这种方式会需要修改路由规则的 path 属性，【正则规则去匹配 path 属性值】  -->
    <router-link to="/register/12/zsp">注册</router-link>

    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h3>登录组件</h3>',
        created() {
            console.log(this.$route)

            // 方式一；路由规则 query 方式传参
            // 通过 "/login?id=10&name=zsp" 跳转 登录页面方式
            console.log(this.$route.query.id)
            console.log(this.$route.query.name)

        }
    }


    var register = {
        template: '<h3>注册组件</h3>',
        created() {
            console.log(this.$route)

            // 方式二；路由规则 params 方式传参
            console.log(this.$route.params)

            console.log(this.$route.params.id)
            console.log(this.$route.params.name)
        }
    }


    var router = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},
            {path: '/login', component: login},
            {path: '/register', component: register},

            // 方式二：需要特定的 路由规则 【使用 正则规则 去匹配 path 属性值】
            {path: '/register/:id/:name', component: register},
        ],

    })

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router,
    })
</script>
</body>
</html>
